<template>
   <div>
        
        <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
                <span class="custom-tree-node" slot-scope="{ data }">
                    <span>{{ data.name }}</span>
                    <span>
                    &ensp;<el-button type="text">
                        编辑
                    </el-button>&ensp;
                    <el-dialog title="修改分类" :visible.sync="dialogCate">
                        <el-form >
                            <el-form-item label="分类名称：" :label-width="formLabelWidth">
                                <el-input  autocomplete="off" v-model="catenames"></el-input>
                            </el-form-item>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogCate = false">取 消</el-button>
                            <el-button type="primary">确 定</el-button>
                        </div>
                    </el-dialog>
                    <el-button type="text">
                        删除
                    </el-button>
                    </span>
                </span>
      </el-tree>

        <van-button @click="show = !show">确定</van-button>
        <div v-show="show">
            输入名称<input type="text" v-model="form.name">
            <select name="" id="" v-model="form.fid">
                <option :value="0">顶级</option>
                <option :value="i.id" v-for="i in datalist">{{i.name}}</option>
            </select>
            <button @click="addcate">添加</button>
        </div>
    </div>
</template>

<script>
export default {
   data () {
      return {
             form:{},
            datalist:[],
            show:false,
            data: [],
            dialogCate: false,
            formLabelWidth: '120px',
            catenames:'',      
      };
   },

   methods: {
       //添加课程
        addcate:function(){
            this.axios.post(this.localhost+'addcate/',this.form)
            .then(res=>{
                console.log(res);
                if(res.data.code == 200){
                    this.get_tree()
                    this.get_cateall()
                    this.form = {}
                }
            })
        },
       //树枝数据获取
       get_tree:function(){
           this.axios.get(this.localhost+'catelist/')
           .then(res=>{
               console.log(res);
               this.data = res.data
           })
       },
       //获取全部数据
       get_cateall:function(){
           this.axios.get(this.localhost+'cateall/')
           .then(res=>{
               console.log(res);
               this.datalist = res.data
           })
       },
        
   },

   computed: {},

   mounted() {
       this.get_tree()
       this.get_cateall()
   },

   components: {}
}
</script>
<style lang='css' scoped>

</style>